<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
    <!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
    <div class="arttmpl">
        <el-row>
            <el-col :span='24'>
                <div class="abread bt-line">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">购物商城</el-breadcrumb-item>
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
        </el-row>
        <!-- 按钮 -->
        <div class="operation">
            <el-row>
                <el-col :span='6'>
                    <router-link to="/admin/goodsadd">
                        <el-button :plain="true" type="info" icon='plus'>新增</el-button>
                    </router-link>
                    <el-button :plain="true" type="info" icon='check' @click='seleteAll(datalist)'>全选</el-button>
                    <el-button :plain="true" type="info" icon='delete' @click='del'>删除</el-button>
                </el-col>
                <el-col :span='3' offset='15'>
                    <el-input placeholder="请输入搜索内容" icon="search" v-model='searchVal' :on-icon-click="getlist"></el-input>
                </el-col>
            </el-row>
        </div>
        <!-- 表格 -->
        <el-row>
            <el-col :span='24'>
                <template>
                    <!-- @selection-change='getrow' 有一个参数row,row是勾选的数组对象,做勾选作用,拿到ID作用的 -->
                    <!-- ref='multipleTable' 外部加 @click='seleteAll(datalist)' 全选按钮的时候用到-->
                    <el-table height='430' @selection-change='getrow' :data="datalist" style="width: 100%" ref='multipleTable' :row-class-name="tableRowClassName">
                        <!--stripe  斑马线-->
                        <el-table-column type='selection' label="全选" width="80"></el-table-column>
                        <el-table-column prop="title" label="标题">
                            <template scope="scope">
                                <!-- <router-link to="/admin/goodedit"> 第一种,什么都不用加的方式,下面那种,可以用v-bind代替-->
                                <router-link v-bind="{ 'to':'/admin/goodedit/'+scope.row.id }">
                                    {{scope.row.title}}
                                </router-link>
                            </template>
</el-table-column>
<el-table-column prop="categoryname" label="所属类别" width="180"></el-table-column>
<el-table-column prop="stock_quantity" label="库存" width="80"></el-table-column>
<el-table-column prop="market_price" label="市场价" width="80"></el-table-column>
<el-table-column label="发布人/发布时间" width="180">
    <template scope="scope">
                                {{scope.row.user_name }} / {{scope.row.add_time | timefil('YY-MM-DD')}}
                                <!--如果要取多个值得时候,通过scope.row.-->
                            </template>
</el-table-column>
<el-table-column prop="address" label="属性" width="180">
    <template scope='scope'>
                                <!-- 工具提示工具 -->
                                <el-tooltip class="item" effect="dark" v-bind="{content:(scope.row.is_slide==1?'进入轮播图':'不进入轮播图')}" placement="bottom-end">
                                    <!-- 0 代表没有 1 代表有 -->
                                    <i v-bind="{'class':'el-icon-picture ls ' +(scope.row.is_slide==1?'imgactive':'')}"></i>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" v-bind="{content:(scope.row.is_top==1?'置顶':'不置顶')}" placement="bottom-end">
                                    <i v-bind="{'class':'el-icon-upload ls ' +(scope.row.is_top==1?'imgactive':'')}"></i>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" v-bind="{content:(scope.row.is_top==1?'热门':'未热门')}" placement="bottom-end">
                                    <i v-bind="{'class':'el-icon-upload ls ' +(scope.row.is_hot==1?'imgactive':'')}"></i>
                                </el-tooltip>
                            </template>
</el-table-column>
<el-table-column prop="address" label="操作" width="80">
    <template scope="scope">
                                <!--自定义写的,则需要用template scope="scope"> 包住-->
                                <router-link v-bind="{ 'to':'/admin/goodedit/'+scope.row.id }">
                                    <el-button type='success'>修改</el-button>
                                </router-link>
                            </template>
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
<!-- 分页功能 -->
<el-row>
    <el-col :span='24'>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30,50,100, 200]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totallist">
        </el-pagination>
        <!-- 
            :current-page   当前 1  2 3  4 页 默认是第一页开始
            :current-change 点击会触发上面的单前页,接收的参数就是点击的页码
            :page-sizes  数组,一次显示多少条,控制下拉框里面具体的数据显示
            :page-size="100"  一次显示多少条,具体指应该是:page-sizes数组里面的值,如果不是,默认用数组第一个值
            @size-change  触发选择一页显示多少条数据的事件  参数就是数组里面的其中给一个值
            
         -->
    </el-col>
</el-row>
</div>
</template>

<script>
    // es6的export default{ 写法等同于 module.exports={
    export default {
        // es6的写法 data() 等同于es5的 data:function()
        data() {
            return {
                searchVal: '', //搜索框输入值
                datalist: [], //数据展示列表的数组
                ids: '', // 存放勾选的ID
                currentPage: 1, // 默认是第一页
                pagesize: 10, //控制一页显示多少条数据
                totallist: 0, //总数据条数,  这个应该是后台API数据返回回来的数据,
            }
        },
        created() { //在生成dom之前,这个会触发,通常用来发送ajax请求
            this.getlist();
        },
        methods: {
            // 全选功能
            seleteAll(rows) {
                if (rows) {
                    rows.forEach(row => {
                        // 全选
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    // 反选
                    this.$refs.multipleTable.clearSelection();
                }
            },
            // 删除数据
            del() {
                if (this.ids.length <= 0) {
                    this.$message.error('请勾选需要删除的数据');
                    return;
                }

                // MessageBox 弹框

                this.$confirm('此操作将永久删除该信息, 是否继续?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var url = '/admin/goods/del/' + this.ids;
                    this.$http.get(url).then(res => {
                        if (res.data.status == 1) {
                            return this.$message.error(res.data.message);
                        }
                        // 删除成功
                        this.$message.success(res.data.message);
                        // 调用刷新接口
                        this.getlist();
                    })
                }).catch(() => {
                    // 取消删除,则什么都不做
                });
            },
            // 下拉框,触发一次显示多少条数据
            handleSizeChange(pagesize) {
                this.pagesize = pagesize;
                // 然后再调用getlist去请求数据
                this.getlist();
            },
            // 点击页码触发
            handleCurrentChange(page) {
                this.currentPage = page;
                // 触发后,调用getlist去请求数据
                this.getlist();
            },
            //获取每次勾选的ID
            getrow(row) {
                // console.log(row);  //row是勾选的数组对象
                var str = ',';
                this.ids = ''; //每次都会累加,所有每次触发前,先清空
                for (var i = 0; i < row.length; i++) {
                    if (i >= row.length - 1) {
                        str = ''; //最后一个不用加逗号
                    }
                    this.ids += row[i].id + str;
                }
                console.log(this.ids);
            },
            // 获取列表数据
            getlist() {
                var url = '/admin/goods/getlist?pageIndex=' + this.currentPage + '&pageSize=' + this.pagesize +
                    '&searchvalue=' + this.searchVal;
                this.$http.get(url).then(res => {
                    if (res.status == 200) { //成功
                        this.datalist = res.data.message;
                        this.totallist = res.data.totalcount; //总条数
                        console.log(res.data)
                    } else {
                        this.$message.error(res.data.message); //失败的时候 饿了么模板的弹出框
                    }
                })
            },
            //隔行变色
            tableRowClassName(row, index) {
                //row 当前数据对象   index  数据索引
                if (index % 2 == 0) {
                    return 'info-row';
                } else {
                    return 'positive-row';
                }
            }
        }
    }
</script>

<style scoped>
    .el-table .info-row {
        background: #c9e5f5;
    }
    
    .el-table .positive-row {
        background: #e2f0e4;
    }
</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->